<template>
  <div>
    <el-card>
      <el-page-header
        icon=""
        content="新闻列表"
        title="新闻管理"
        class="page_header"
      ></el-page-header>
      <div class="searchReset">
        <el-form
          :inline="true"
          ref="searchFormRef"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="新闻标题">
                <el-input
                  v-model="searchForm.title"
                  placeholder="支持新闻标题模糊查询"
                  clearable
                  @keyup.enter="getTableData()"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="新闻分类">
                <el-select
                  v-model="searchForm.category"
                  style="width: 100%"
                  placeholder="请选择新闻分类"
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否发布"
                ><el-select
                  v-model="searchForm.isPublish"
                  style="width: 100%"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isPublishOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  /> </el-select
              ></el-form-item>
            </el-col>
            <el-col :span="6">
              <div style="float: right; margin-right: 33px">
                <el-button type="primary" @click="getTableData()"
                  >查询</el-button
                >
                <el-button @click="handleReset()">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        show-overflow-tooltip
        stripe
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#E7E7E7' }"
      >
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="category" label="分类" width="100">
          <template #default="scope">
            {{ categoryFormat(scope.row.category) }}
          </template>
        </el-table-column>
        <el-table-column prop="creater" label="创建人" width="110" />
        <el-table-column prop="editTime" label="更新时间" width="180">
          <template #default="scope">
            {{ formatTime.getTime(scope.row.editTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="isPublish" label="是否发布" width="100">
          <template #default="scope">
            <el-switch
              v-model="scope.row.isPublish"
              :active-value="2"
              :inactive-value="1"
              @change="changePublish(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          header-align="center"
          width="146"
        >
          <template #default="scope">
            <!-- // 预览 -->
            <el-button
              circle
              :icon="View"
              type="success"
              @click="handlePreview(scope.row)"
            ></el-button>
            <!-- // 编辑 -->
            <el-button
              circle
              :icon="Edit"
              @click="handleEdit(scope.row)"
            ></el-button>
            <!-- // 删除 -->
            <el-popconfirm
              title="确定要删除吗?"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.row)"
            >
              <template #reference>
                <el-button circle :icon="Delete" type="danger"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible" title="预览新闻" width="50%">
      <div>
        <h2>{{ previewData.title }}</h2>
        <div style="font-size: 12px; color: gray">
          {{ formatTime.getTime(previewData.editTime) }}
        </div>
        <el-divider>
          <el-icon>
            <CaretBottom />
          </el-icon>
        </el-divider>
        <div class="htmlcontent" v-html="previewData.content"></div>
        <el-divider>
          <span style="font-size: 12px; color: gray">end</span>
        </el-divider>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import formatTime from '@/util/formatTime'
import { View, Edit, Delete, CaretBottom } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const store = useStore()

const router = useRouter()

const searchFormRef = ref()
const searchForm = ref({
  title: '',
  category: null,
  isPublish: null
})

const tableData = ref([])
const previewData = ref({})
const dialogVisible = ref(false)

onMounted(() => {
  getTableData()
})

const getTableData = async () => {
  const data = {...searchForm.value, creater: store.state.userInfo.userName}
  const res = await axios.post(`/adminApi/news/list`, {data})
  if (res.data.code === '0000') {
    tableData.value = res.data.data
  }
}

const categoryFormat = (category) => {
  const arr = ['最新动态', '典型案例', '通知公告']
  return arr[category - 1]
}

const changePublish = async (item) => {
  console.log(item);
  const res = await axios.put(`/adminApi/news/publish`, {
    _id: item._id,
    isPublish: item.isPublish
  })
  if (res.data.code === '0000') {
    ElMessage.success(res.data.msg)
    await getTableData()
  }
}

const handlePreview = async (item) => {
  console.log(item)
  previewData.value = item
  dialogVisible.value = true
}

const options = [
  // 1最新动态 2典型案例 3通知公告
  { label: '最新动态', value: 1 },
  { label: '典型案例', value: 2 },
  { label: '通知公告', value: 3 }
]

const isPublishOptions = [
  { label: '未发布', value: 1 },
  { label: '已发布', value: 2 }
]

const handleReset = async () => {
  searchForm.value.title = ''
  searchForm.value.category = ''
  searchForm.value.isPublish= ''
  await getTableData()
}

const handleDelete = async (item) => {
  // console.log(item);
  const res = await axios.delete(`/adminApi/news/list/${item._id}`)
  if (res.data.code === '0000') {
    ElMessage.success(res.data.msg)
    await getTableData()
  }
}

const handleEdit = async (item) => {
  // 跳转到编辑页
  router.push(`/news-manage/editNews/${item._id}`)
}
</script>

<style scoped lang="scss">
.page_header {
  padding-bottom: 18px;
  border-bottom: 1px solid #dadada;
}
.el-table {
  margin-top: 10px;
}
::v-deep .htmlcontent {
  img {
    max-width: 100%;
  }
}
.searchReset {
  margin-top: 20px;
}
</style>
